<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="http://xxxxxxxxx.css"> -->
</head>

<body>
  <button onclick="handle()">请求</button>
  <!-- <img src="https://img2.baidu.com/it/u=3995668723,747638824&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=988" alt=""> -->

  <!-- <script>
    function handle() {
      let xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://localhost:3000', true)
      xhr.send()
      xhr.onreadystatechange = function () {  // 当前请求的状态
        // 0 初始化状态
        // 1 open状态
        // 2 send状态
        // 3 解析接受到的数据
        // 4 完成状态
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText)
        }
      }
    }
  </script> -->


  <!-- <script src="http://localhost:3000?cb='callback'"></script> -->
  <script>
    function jsonp(url, cb) {
      return new Promise((resolve, reject) => {

        const script = document.createElement('script')

        window[cb] = function (data) {
          // console.log(data) // 后端返回的数据
          resolve(data)
        }

        script.src = `${url}?cb=${cb}`

        document.body.appendChild(script)
        // callback('hello world')

      })
    }




    function handle() {
      jsonp('http://localhost:3000', 'callback').then(res => {
        console.log(res)
      })
    }
  </script>
</body>

</html>